import React from 'react';
import '../styles/components/Header.css'
import '../styles/pages/iconfont.css'
// 按需加载antd的组件
import { Row, Col, Menu } from 'antd'
import Link from 'next/link'

const Header = () => {
    return (
        <div className="header">
            <Row type="flex" justify="center">
                <Col className='logo' xs={24} sm={24} md={10} lg={15} xl={10}>
                    <span className="header-logo">一个可爱的前端小哥哥</span>
                </Col>
                <Col className="memu-div" xs={0} sm={0} md={8} lg={5} xl={8}>
                    <Menu mode="horizontal">
                        <Menu.Item key="home">
                            <a href='/'><i className='iconfont'>&#xe6b6;</i>我的首页</a>
                        </Menu.Item>
                        <Menu.Item key="List">
                            <Link href={{ pathname: '/List' }}>
                                <a> <i className="iconfont">&#xe624;</i>技术文章</a>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="note">
                            <Link href={{ pathname: '/note' }}>
                                <a> <i className="iconfont">&#xe64d;</i>随便搞点</a>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="life">
                            <Link href={{ pathname: '/life' }}>
                                <a> <i className="iconfont">&#xe64d;</i>生活记录</a>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="own">
                            <Link href='https://blog-1257236742.cos.ap-nanjing.myqcloud.com/%E5%89%8D%E7%AB%AF-%E5%BC%A0%E6%9D%A8.pdf'>
                                <a> <i className="iconfont">&#xe64d;</i>我的简历</a>
                            </Link>
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div >
    )
}

export default Header